<template>
  <div class="head-line">
    <div class="submit-box body-cont">
      <div class="card-shadow">
        <ul>
          <li>
            <span class="type grey">订单号：</span>{{order.subOrderNo || order.orderNo}}
          </li>
          <li>
            <span class="type grey">下单时间：</span> {{order.createDate}}
          </li>
          <li>
            <span class="type grey">服务类型：</span> <span class="tips">{{serviceInfo[order.serviceType] && serviceInfo[order.serviceType].name}}</span>
          </li>
        </ul>
      </div>
      <div class="card-shadow">
        <ul>
          <li>
            <span class="type grey">客户名称：</span> {{order.jlyCustAddress.custName || '--'}}
          </li>
          <li>
            <span class="type grey">客户手机号：</span> {{order.jlyCustAddress.phone || '--'}}
          </li>
          <li>
            <span class="type grey">服务地址：</span> {{order.jlyCustAddress.address || '--'}}
          </li>
        </ul>
      </div>
      <div class="card-shadow">
        <ul class="baby-info">
          <li v-for="(item, index) in infoList" :key="index">
            <span class="type grey">{{item.name}}：</span> {{item.value}}
          </li>
         </ul>
        <div v-if="order.remarks" class="note">
          <span class="dark font14">备注</span>
          <div class="grey font14">{{order.remarks}}</div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <div class="btn-full" @tap="goBack" >返回</div>
    </div>
  </div>
</template>
<script>
import getOrderDetail from '@/interface/order/getOrderDetail'
// import getAddress from '@/interface/address/getAddress'
import {rangeData, serviceTypeData, serviceInfo} from '@/config'
import dateUtil from '@/utils/dateUtil'

export default {
  components: { },
  data(){
    return {
      rangeData,
      addressData: {},
      order: {},
      infoList: [],
      serviceInfo,
      serviceTypeData
    }
  },
  computed: {

  },
  methods: {
    getInfoList () {
      const obj = serviceInfo[this.order.serviceType].info
      if (!obj) return
      const dateText = {
        xsg: '小时',
        ys: '天',
      }
      const duration = dateText[this.order.serviceType]
      const list = Object.keys(obj).map(v => {
        let value = this.order[v] || '--'
        if (rangeData[v] && rangeData[v][this.order[v]] !== undefined) {
          value = rangeData[v][this.order[v]]
        }

        switch (v) {
          case 'serviceDuration':
            if(duration){
              value = this.order[v] + duration
            }else{
              value = rangeData.serviceDuration[this.order.serviceDuration]
            }
            break
          case 'wastelandArea':
          case 'housingArea':
            value = value + '平米'
            break
          case 'servicePrice':
            value = value + '元'
            break
          case 'serviceFrequency':
            value = value + '次'
            break
          case 'demand':
            if (this.order[v]) {
              value = this.order[v].split(',').map(val => rangeData[v][val]).join(',')
            }
            break
          case 'hopeDate':
            if(typeof value === 'number'){
              value = dateUtil.format(new Date(value), 'yyyy-MM-dd')
            }
            break
          case 'serviceStartDate':
          case 'serviceEndDate':
            if(typeof value === 'number'){
              value = dateUtil.format(new Date(value))
            }
          default:
            break
        }
        return {name: obj[v], value}
      })
      console.log(list)
      this.infoList = list
    },
    goBack () {
      this.navigateBack()
    }
  },
  beforeMount () {
    this.checkLogin()
  },
  mounted () {
    this.addressData = {}
    this.order = {}
    this.infoList = []

    const { id } = this.$root.$mp.query
    getOrderDetail({ id }).then(data => {
      this.order = data
      // getAddress({addressId: data.addressId}).then(res => {
      //   this.addressData = res
      // })
      this.getInfoList()
    })
  }
}
</script>

<style lang="less" >
 page {
  background: #f9f9f9;
  height: 100%;
}
.head-line {
  padding-bottom: 80px;
}
.card-shadow {
  margin-bottom: 28upx;
  background: #fff;
}
.card-shadow .note {
  padding: 0upx 28upx 52upx;
}
.order-num {
  height: 78upx;
  line-height: 78upx;
  border-bottom: 1upx solid #ddd;
  font-size: 24upx;
  color: #aaa;
  margin-left: 28upx;
}
.order-num .order-no {
  display: inline;
  color: #888;
}
.order-num .detail {
  float: right;
  color: #3186ff;
  margin-right: 33upx;
}
ul.baby-info {
  padding: 20upx 28upx 13upx;
}
ul {
  padding: 10upx 28upx 47upx;
}
ul li {
  font-size: 28upx;
  color: #333;
  margin: 20upx 0;
}
ul li .tips {
  display: inline-block;
  border-radius: 4upx;
  background-color: #fa4b70;
  height: 54upx;
  padding: 0 20upx;
  line-height: 54upx;
  text-align: center;
  color: #fff;
}
ul li.time {
  font-size: 24upx;
  color: #aaa;
  margin-bottom: 24upx;
}
ul li.time .order-time {
  margin-right: 100upx;
}
.body-cont {
  padding-bottom: 100upx;
}
</style>